<template>
	<div id="employee">
		<el-row type='flex' justify='space-around'>
			<el-col :span='6'>
				<div class="radius_5px">
					<el-progress type="circle" :percentage="60" stroke-width='12'></el-progress>
					<div>正式员工</div>
				</div>
			</el-col>
			<el-col :span='6'>
				<div class="radius_5px">
					<el-progress type="circle" :percentage="20" stroke-width='12' color='#2ECA9C'></el-progress>
					<div>实习员工</div>
				</div>
			</el-col>
			<el-col :span='6'>
				<div class="radius_5px">
					<el-progress type="circle" :percentage="50" stroke-width='12' color="#EE706D"></el-progress>
					<div>试用期员工</div>
				</div>
			</el-col>
			<el-col :span='6'>
				<div class="radius_5px">
					<el-progress type="circle" :percentage="15" stroke-width='12' color='#2ECA9C'></el-progress>
					<div>外包员工</div>
				</div>
			</el-col>
		</el-row>
		<div class="list radius_5px">
			<el-row type='flex' justify='space-between'>
				<el-col :span='3'><h4>员工列表</h4></el-col>
				<el-col :span='2'><div><el-button type='primary'>添加员工</el-button></div></el-col>
			</el-row>
			<el-table :data="tableData" style="width: 95%;margin: 0 auto;" :header-cell-style="{background:'#eef1f6'}">
				<el-table-column prop="number" label="工号">
				</el-table-column>
				<el-table-column prop="name" label="姓名">
				</el-table-column>
				<el-table-column prop="address" label="住址">
				</el-table-column>
				<el-table-column prop="mail" label="邮箱" width='200'>
				</el-table-column>
				<el-table-column prop="jobs" label="职位">
				</el-table-column>
				<el-table-column prop="time" label="入职时间">
				</el-table-column>
				<el-table-column label="操作">
					<div style="display: flex;">
						<el-button type='primary' size="medium">修改</el-button>
						<el-button type='danger' plain size="medium">删除</el-button>
					</div>
				</el-table-column>
			</el-table>
		</div>	
		<div class="footer"></div>
	</div>
</template>

<script>
	import '../css/employee.css';
	export default {
		data: function() {
			return {
				tableData: [
					{number: parseInt((Math.random()*40000)+20000), name: '小王', address: '上海市', mail: 'admin@example.com', jobs: '产品', time: '2015-5-12'},
					{number: parseInt((Math.random()*40000)+20000), name: '小李', address: '上海市', mail: 'admin@example.com', jobs: '产品', time: '2015-5-12'},
					{number: parseInt((Math.random()*40000)+20000), name: '张三', address: '上海市', mail: 'admin@example.com', jobs: '运营', time: '2015-5-12'},
					{number: parseInt((Math.random()*40000)+20000), name: '李四', address: '上海市', mail: 'admin@example.com', jobs: '设计师', time: '2015-5-12'},
					{number: parseInt((Math.random()*40000)+20000), name: '隔壁老王', address: '上海市', mail: 'admin@example.com', jobs: '运营', time: '2015-5-12'},
					{number: parseInt((Math.random()*40000)+20000), name: '猴子', address: '上海市', mail: 'admin@example.com', jobs: '开发', time: '2015-5-12'},
					{number: parseInt((Math.random()*40000)+20000), name: '窝窝头', address: '上海市', mail: 'admin@example.com', jobs: '设计师', time: '2015-5-12'},
				]
			}
		}
	}
</script>

<style>
</style>
